<!--单项目，文件名错的-->
<template>
  <div class="wh100 flex_column">
    <!--  -->
    <div class="one flex_align">
      <div class="left-top">
        <corner-card>
          <div class="title" slot="head">
            <!-- @click="$publicJs.clickJump('开累进度')" -->
            <span class="clickable">开累进度</span>
          </div>
          <div class="content flex_align" slot="content">
            <div class="number flex_column">
              <div class="number-bg flex_align blue">
                <img :src="i1" alt="">
                <div class="flex_1 number-info">
                  <div class="num blueFColor">
                    <span class="big">{{ kljdData.value1 }}</span>
                    <span class="unit">万元</span>
                  </div>
                  <div class="info">概算批复</div>
                </div>
              </div>
              <div class="number-bg flex_align orange">
                <img :src="i2" alt="">
                <div class="flex_1 number-info">
                  <div class="num orangeFColor">
                    <span class="big">{{ kljdData.value2 }}</span>
                    <span class="unit">万元</span>
                  </div>
                  <div class="info">累计完成</div>
                </div>
              </div>
            </div>
            <div ref="klPercent" class="flex_1 percent">
              <el-progress type="dashboard" :width="klPercentW" :percentage="kljdData.value3" :stroke-width="klPercentSW" color="#1E70FA" define-back-color="#E5EFFF" text-color="#2C2C2C"></el-progress>
              <div class="pencent-info">完成百分比</div>
            </div>
          </div>
        </corner-card>
      </div>

      <div class="right-top flex_1">
        <corner-card>
          <div class="title" slot="head">
            <!--@click="$publicJs.clickJump('年月进度')"  -->
            <span class="clickable">年月进度(万元)</span>
            <div class="btn_group">
              <el-date-picker style="width:130px" v-model="month" type="month" format="yyyy年M月" @change="singleAnnualPlan1" :clearable="false" />
            </div>
          </div>
          <div class="content flex_between" slot="content">
            <div class="month-progress flex_align" v-for="(item, index) in midTopData" :key="index">
              <div class="progress-detail">
                <div class="detail">
                  <div class="detail-title">{{ item.type }}计划</div>
                  <div class="detail-number colorBlue">{{item.plan}}</div>
                </div>
                <div class="detail">
                  <div class="detail-title">{{ item.type }}完成</div>
                  <div class="detail-number colorGreen">{{item.complete}}</div>
                </div>
                <div class="detail">
                  <div class="detail-title">百分比</div>
                  <div class="detail-number color">{{item.percent}}%</div>
                </div>
              </div>
              <div class="flex_1 percent">
                <div ref="ymPercent">
                  <el-progress type="dashboard" text-color="#3799FF" :percentage="item.percent" :width="ymPercentW" :stroke-width="ymPercentSW" color="#1E70FA" define-back-color="#E5EFFF"></el-progress>
                  <div class="pencent-info">总体进度</div>
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
    <!-- two -->
    <div class="flex_1 flex_align">
      <div class="right-middle-left flex_1">
        <corner-card>
          <div class="title" slot="head">
            <!--@click="$publicJs.clickJump('投资进度')"  -->
            <span class="clickable">投资进度</span>
          </div>
          <div class="content" slot="content">
            <div id="bar" class="barChart"></div>
          </div>
        </corner-card>
      </div>
      <div v-show="false" class="right-middle-right">
        <corner-card>
          <div class="title" slot="head">
            <!--@click="$publicJs.clickJump('建安投资进度')"  -->
            <span class="clickable">建安投资进度</span>
          </div>
          <div class="content flex_between flexW" slot="content">
            <div class="detail flex_column" v-for="(item, index) in rightMiddleRightData" :key="index">
              <!-- @click="$publicJs.clickJump(getJumpName(item.name))" -->
              <div class="detail-title clickable">{{item.name}}</div>
              <div class="flex_1 detail-info flex_between">
                <el-progress type="circle" :width="60" :color="item.color" :percentage="item.percent" :define-back-color="item.bg"></el-progress>
                <div>
                  <div class="desc">计划投资</div>
                  <div class="number">{{item.plan}}万元</div>
                  <div class="desc">完成投资</div>
                  <div class="number">{{item.complete}}万元</div>
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>

    <!-- trhee -->
    <div v-if="false" class="trhee flex_align">
      <div class="left-bottom">
        <corner-card>
          <div class="title" slot="head">
            <span>关键工程</span>
            <div class="btn_group">
              <!--  -->
              <el-select @change="singleKeyEngineering1" v-model="gjgcData.sectionId" filterable>
                <el-option :value="''" label="全部"></el-option>
                <el-option v-for="section in sectionTree" :key="section.id" :value="section.id" :label="section.name">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="content" slot="content">
            <el-empty v-if="leftBottomData.length === 0">
              <div slot="image"></div>
            </el-empty>
            <div class="list-item" v-for="(item, index) in leftBottomData" :key="index">
              <div class="item-title">{{item.name}}</div>
              <div class="block-list">
                <div class="box" :class="{'active': i <= item.index,'mark':i==item.index}" v-for="i in 33" :key="i">
                  <div v-if="i==item.index" class="location">
                    <div class="trangle"></div>
                    <div class="percent">{{item.percent}}%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
      <div class="right-bottom flex_1">
        <corner-card>
          <div class="title" slot="head">
            <!-- @click="$publicJs.clickJump('形象进度')" -->
            <span class="clickable">形象进度</span>
            <div class="btn_group">
              <!-- @change="singleImageProgress(); getImageBeak()" -->
              <el-select style="width:120px" v-model="xxjdData.sectionId" filterable>
                <el-option :value="''" label="全部"></el-option>
                <el-option v-for="section in sectionTree" :key="section.id" :value="section.id" :label="section.name">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="content" slot="content">
            <div class="header">
              <div class="percent">
                <el-progress type="circle" color="#5EC738" :width="140" :stroke-width="12" define-back-color="#E3F3DD" :percentage="xxjdData.percent"></el-progress>
                <div class="pencent-info">总体形象进度</div>
              </div>
              <div id="line"></div>
            </div>
            <div class="footer">
              <div class="tool">
                <el-radio-group @change="singleImageProgressHistogram" v-model="xxjdData.tab.value" size="mini">
                  <el-radio-button :label="item" v-for="(item,index) in xxjdData.tab.list" :key="'tab'+index"></el-radio-button>
                </el-radio-group>
              </div>
              <div id="two-bar"></div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import * as echarts from "echarts";
import i1 from '@/assets/images/progress/i1.png'
import i2 from '@/assets/images/progress/i2.png'
import CornerCard from './cornerCard.vue';
// import progressBoard from '@/api/buss-measure/progressboard'
// import projectSectionInfo from '@/api/buss/common'
import msgUtil from '@/utils/msgUtil'

export default {
  name: 'progressAnalysis',
  components: { CornerCard },
  data() {
    return {
      klPercentW: 130,
      klPercentSW: 18,
      ymPercentW: 110,
      ymPercentSW: 7,
      i1, i2,
      keywork: '',
      imageType: '',
      imageTypes: '',
      statisticType: '开累完成',
      month: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
      kljdData: {
        value1: 369850,
        value2: 186520,
        value3: 38,
      },
      tableData: [],
      leftBottomData: [
        {
          name: '风扇隧道',
          percent: 46.2,
          //一共33个小格子，多少百分比就占 百分比*33 向上取整的数字的格子
          index: 16,
          //上方箭头所在位置计算公式，(所占格子数*格子宽度12) + (所占格子数-1 * 格子之间的空格宽度4) - (箭头所占宽度的一半)
          location: (16 * 12) + (15 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 68.6,
          index: 23,
          location: (23 * 12) + (22 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 76.5,
          index: 26,
          location: (26 * 12) + (25 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 35.8,
          index: 12,
          location: (12 * 12) + (11 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 51.3,
          index: 17,
          location: (17 * 12) + (16 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 46.2,
          index: 16,
          location: (16 * 12) + (15 * 4) - (50 / 2)
        },
        {
          name: '风扇隧道',
          percent: 46.2,
          index: 16,
          location: (16 * 12) + (15 * 4) - (50 / 2)
        }
      ],
      xxjdData: {
        sectionId: '',
        percent: 44.74,
        tab: {
          list: ['开累完成', '本年完成', '本月完成'],
          value: ''
        }
      },
      gjgcData: {
        sectionId: ''
      },
      midTopData: [
        {
          type: '本年',
          plan: '235331',
          complete: '163413',
          percent: 73
        },
        {
          type: '本年',
          plan: '235331',
          complete: '163413',
          percent: 73
        },
        {
          type: '本年',
          plan: '235331',
          complete: '163413',
          percent: 73
        }
      ],
      companyTree: [],
      rightMiddleRightData: [
        { name: '本周', percent: 22, plan: '1685.8', complete: '338.9', bg: '#E1ECFF', color: '#1E70FA' },
        { name: '本月', percent: 56, plan: '1685.8', complete: '338.9', bg: '#EBFBF4', color: '#69DEAE' },
        { name: '上半月', percent: 45, plan: '1685.8', complete: '338.9', bg: '#DEEDF1', color: '#53C1EB' },
        { name: '下半月', percent: 45, lan: '1685.8', complete: '338.9', bg: '#FBF1E0', color: '#FDBF54' }
      ],
      chartInstance: {}
    }
  },
  created() {
    // this.leftBottomData = []
    // projectSectionInfo.getProjectSectionInfoTree().then(res => {
    //   if (res.code === 200) {
    //     const data = res.data;
    //     this.companyTree = data
    //   } else {
    //     msgUtil.error2(res.data.message)
    //   }
    // }).catch(() => {
    //   msgUtil.error2("获取项目标段树失败")
    // })
  },
  computed: {
    sectionTree() {
      for (let i = 0; i < this.companyTree.length; i++) {
        const project = this.companyTree[i].children.find(project => project.id === this.projectId)
        if (project) {
          return project.children
        }
      }
      return []
    },
    projectId() {
      return this.$store.state.settings.changeHeaderProject
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler(newVal) {
        // this.xxjdData.sectionId = ''
        // this.gjgcData.sectionId = ''
        this.$nextTick(() => {
          // 开累进度的统计环大小
          this.klPercentW = this.$refs.klPercent.clientWidth
          this.klPercentSW = Math.floor(this.klPercentW / 9) > 10 ? Math.floor(this.klPercentW / 9) : 10
          // 年月进度环形大小计算
          this.ymPercentW = this.$refs.ymPercent[0].clientWidth
          this.ymPercentSW = Math.floor(this.ymPercentW / 17) > 7 ? Math.floor(this.klPercentW / 17) : 7
          this.initBottomBar()//投资进度
          // this.initLine()
          // this.initBar()
          // 
          // this.singleStartAccumulatingProgress()
          // this.singleAnnualPlan()
          // this.singleInvestmentProgress()
          // this.singleBudgetExecution()
          // this.singleconstructionInvestmentProgress()
          // this.singleImageProgress()
          // this.getImageBeak()
          // this.singleKeyEngineering()
        })
      }
    }
  },
  methods: {
    initBottomBar() {
      this.BottomBar && this.BottomBar.clear()
      this.BottomBar && this.BottomBar.dispose()
      let chartDom = document.getElementById('bar')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          top: '30px',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          valueFormatter: (val) => {
            return `${val}万元`
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
            }
          },
          splitNumber: 5,
          name: '万元',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {

            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070',
              }
            },
            axisLabel: {
              color: '#7C7C7C'
            },
            data: ['TJ01', 'TJ02', 'TJ03', 'TJ04', 'TJ05', 'TJ06', 'TJ07', 'TJ08', 'TJ09', 'TJ10']
          }
        ],
        series: [
          {
            name: '计划完成产值',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#E4ECFC',
              borderRadius: [15, 15, 0, 0]
            },
            barGap: '20%',
            barGap: '-100%',
            barWidth: 20,
            data: [30, 40, 40, 60, 70, 80, 70, 80, 90, 100]
          },
          {
            name: '实际完成产值',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#3982FA',
              borderRadius: [15, 15, 0, 0]
            },
            barWidth: 20,
            data: [20, 30, 40, 50, 10, 40, 60, 70, 60, 50]
          }
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.BottomBar = myChart
      }, 200);
    },
    initLine() {
      this.BottomBar && this.BottomBar.clear()
      this.BottomBar && this.BottomBar.dispose()
      let chartDom = document.getElementById('line')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          containLabel: false
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: { show: false },
          axisLine: { show: false },
          data: ['TJ01', 'TJ02', 'TJ03', 'TJ04', 'TJ05', 'TJ06', 'TJ07', 'TJ08', 'TJ09', 'TJ10']
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(108,128,151,0.3)',
            }
          },
          splitNumber: 4,
          name: '%  ',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        series: [
          {
            data: [20, 30, 40, 50, 10, 40, 60, 70, 60, 50],
            type: 'line',
            label: {
              show: true,
              formatter(params) {
                return params.value + '%'
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {
                    offset: 0,
                    color: 'rgba(118,112,247,0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(118,112,247,0.25)'
                  }
                ]
              ),
            },
            smooth: true
          }
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.BottomBar = myChart
      }, 200);
    },
    initBar() {
      this.BottomBar && this.BottomBar.clear()
      this.BottomBar && this.BottomBar.dispose()
      let chartDom = document.getElementById('two-bar')
      let myChart = echarts.init(chartDom)
      let option = {
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          containLabel: false
        },
        legend: {
          right: '3%'
        },
        tooltip: {},
        // dataset: {
        //   dimensions: ['product', '计划', '完成'],
        //   source: res.data.y.map(item => {
        //     return {
        //       product: item.name,
        //       '计划': item.planProductionTotal || item.planProduction,
        //       '完成': item.realProductionTotal || item.realProduction,
        //     }
        //   })
        // },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          data: ['TJ01', 'TJ02', 'TJ03', 'TJ04', 'TJ05', 'TJ06', 'TJ07', 'TJ08', 'TJ09', 'TJ10']
        },
        yAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          // splitLine: {show:false},
        },
        series: [
          {
            // name: '计划完成产值',
            type: 'bar',
            color: '#468BFF',
            barWidth: 14,
            itemStyle: {
              borderRadius: [7, 7, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                return `${params.value}万m²`
              }
            },
            data: [20, 30, 40, 50, 10, 40, 60, 70, 60, 50]
          },
          {
            // name: '实际完成产值',
            type: 'bar',
            color: '#5AC931',
            barWidth: 14,
            itemStyle: {
              borderRadius: [7, 7, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: (params) => {
                return `${params.value}万m²`
              }
            },
            data: [30, 40, 40, 60, 70, 80, 70, 80, 90, 100]
          }
        ]
      }
      setTimeout(() => {
        option && myChart.setOption(option)
        this.BottomBar = myChart
      }, 200);
    },
    getJumpName(name) {
      switch (name) {
        case '本周':
          return '周报'
        case '本月':
          return '月报'
        case '上半月':
          return '周报'
        case '下半月':
          return '周报'

      }
    },
    singleStartAccumulatingProgress() {
      const params = {
        projectId: this.projectId
      }
      progressBoard.singleStartAccumulatingProgress(params).then(res => {
        if (res.code === 200) {
          this.kljdData = {
            value1: Number(res.data.amount).toFixed(0),
            value2: Number(res.data.amount1).toFixed(0),
            value3: Number(res.data.per)
          }
        }
      })
    },
    singleAnnualPlan1() {

    },
    singleAnnualPlan() {
      const params = {
        projectId: this.projectId,
        year: this.month.getFullYear(),
        month: this.month.getMonth() + 1
      }
      progressBoard.singleAnnualPlan(params).then(res => {
        if (res.code === 200) {
          this.midTopData = [
            {
              type: '本年',
              plan: res.data[0].planinvestment_year || 0,
              complete: res.data[0].completinvestment_year || 0,
              percent: Number(res.data[0].completinvestment_year_per || 0)
            },
            {
              type: '半年',
              plan: res.data[1].planinvestment_half_year || 0,
              complete: res.data[1].completinvestment_half_year || 0,
              percent: Number(res.data[1].completinvestment_half_year_per || 0)
            },
            {
              type: '本月',
              plan: res.data[2].planinvestment_month || 0,
              complete: res.data[2].investmentcomplet_month || 0,
              percent: Number(res.data[2].investmentcomplet_month_per || 0)
            }
          ]
        }
      })
    },
    singleInvestmentProgress() {
      const params = {
        projectId: this.projectId
      }
      progressBoard.singleInvestmentProgress(params).then(res => {
        if (res.code === 200) {
          let chartDom = document.getElementById('bar')
          if (this.chartInstance['bar']) {
            this.chartInstance['bar'].clear()
            this.chartInstance['bar'].dispose()
          }
          const list1 = new Array(12).fill(0)
          const list2 = new Array(12).fill(0)
          const xData = new Array(12).fill(1).map((item, index) => {
            return `${index + 1}月`
          })
          res.data.list.forEach(item => {
            const index = Number(item.month) - 1
            list1[index] = item.planinvestmentYear
            list2[index] = item.completinvestmentYear
          })
          let myChart = echarts.init(chartDom)
          this.chartInstance['bar'] = myChart
          let option = {
            grid: {
              left: '8%',
              right: '4%',
              bottom: '10%',
              containLabel: false
            },
            tooltip: {
              show: "true",
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: 'rgba(108,128,151,0.3)',
                }
              },
              splitNumber: 5,
              name: '万元',
              nameLocation: 'end',
              nameTextStyle: {
                align: 'right'
              }
            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'black',
                  }
                },
                data: xData
              },
              {
                type: 'category',
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                splitArea: { show: false },
                splitLine: { show: false },
                data: xData
              },
            ],
            series: [
              {
                name: '计划投资',
                type: 'bar',
                itemStyle: {
                  normal: {
                    show: true,
                    color: 'rgba(57,130,250,1)',
                    // barBorderRadius:50,
                    borderRadius: [8, 8, 0, 0]
                  }
                },
                barGap: '20%',
                barWidth: 13,
                data: list1
              },

              {
                name: '完成投资',
                type: 'bar',
                itemStyle: {
                  normal: {
                    show: true,
                    color: '#5AC931',
                    // barBorderRadius:50,
                    borderRadius: [8, 8, 0, 0]
                  }
                },
                barWidth: 13,
                data: list2
              },
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    singleBudgetExecution() {
      const params = {
        projectId: this.projectId,
        yearStr: this.month.getFullYear(),
        monthStr: this.month.getMonth() + 1
      }
      progressBoard.singleBudgetExecution(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list
        }
      })
    },
    singleconstructionInvestmentProgress() {
      const params = {
        projectId: this.projectId
      }
      progressBoard.singleconstructionInvestmentProgress(params).then(res => {
        function parseNaN(number) {
          return isNaN(number) ? 0 : number
        }
        if (res.code === 200) {
          const data = res.data
          this.rightMiddleRightData = [
            {
              name: '本周',
              plan: data.curWeekPlanMoney,
              complete: data.curWeekCompleteMoney,
              percent: Number(parseNaN(data.curWeekCompleteMoney / data.curWeekPlanMoney * 100).toFixed(2)),
              color: '#1E70FA'
            },
            {
              name: '本月',
              plan: data.curPlanMonthMoney,
              complete: data.curCompleteMonthMoney,
              percent: Number(parseNaN(data.curCompleteMonthMoney / data.curPlanMonthMoney * 100).toFixed(2)),
              color: '#69DEAE'
            },
            {
              name: '上半月',
              plan: data.curPlanHalfMonthMoney1,
              complete: data.curCompleteHalfMonthMoney1,
              percent: Number(parseNaN(data.curCompleteHalfMonthMoney1 / data.curPlanHalfMonthMoney1 * 100).toFixed(2)),
              color: '#53C1EB'
            },
            {
              name: '下半月',
              plan: data.curPlanHalfMonthMoney2,
              complete: data.curCompleteHalfMonthMoney2,
              percent: Number(parseNaN(data.curCompleteHalfMonthMoney2 / data.curPlanHalfMonthMoney2 * 100).toFixed(2)),
              color: '#FDBF54'
            }
          ]
        }
      })
    },
    singleImageProgress() {
      const params = {
        projectId: this.projectId,
        sectionId: this.xxjdData.sectionId
      }
      progressBoard.singleImageProgress(params).then(res => {
        if (res.code === 200) {
          this.xxjdData.percent = Number(res.data.per)
          let chartDom = document.getElementById('line')
          if (res.data.list.length === 0) {
            res.data.list = [
              { name: '暂未配置形象工程', per: '0' }
            ]
          }
          if (this.chartInstance['line']) {
            this.chartInstance['line'].clear()
            this.chartInstance['line'].dispose()
          }
          let myChart = echarts.init(chartDom)
          this.chartInstance['line'] = myChart
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '10%',
              containLabel: false
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              axisTick: { show: false },
              axisLine: { show: false },
              data: res.data.list.map(item => item.name)
            },
            yAxis: {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: 'rgba(108,128,151,0.3)',
                }
              },
              splitNumber: 4,
              name: '%  ',
              nameLocation: 'end',
              nameTextStyle: {
                align: 'right'
              }
            },
            series: [
              {
                data: res.data.list.map(item => Number(item.per)),
                type: 'line',
                label: {
                  show: true,
                  formatter(params) {
                    return params.value + '%'
                  }
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                      {
                        offset: 0,
                        color: 'rgba(118,112,247,0)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(118,112,247,0.25)'
                      }
                    ]
                  ),
                },
                smooth: true
              }
            ]
          }
          option && myChart.setOption(option)
        }
      }).catch(res => {
        console.log(res)
      })
    },
    getImageBeak() {
      const params = {
        sectionId: this.xxjdData.sectionId,
        projectId: this.projectId
      }
      if (params.sectionId) {
        progressBoard.getImageBeak(params).then(res => {
          if (res.code === 200) {
            this.xxjdData.tab.originList = res.data
            this.xxjdData.tab.list = res.data.map(item => item.name)
            if (this.xxjdData.tab.list.length > 0) {
              this.xxjdData.tab.value = this.xxjdData.tab.list[0]
              this.singleImageProgressHistogram()
            } else {
              this.chartInstance['two-bar'] && this.chartInstance['two-bar'].clear()
            }
          }
        })
      } else {
        progressBoard.singleImageBeakProjectId({ projectId: this.projectId }).then(res => {
          if (res.code === 200) {
            this.xxjdData.tab.originList = res.data.listSection
            this.xxjdData.tab.list = Object.keys(res.data.listSection).map(key => res.data.listSection[key]).flat(1).map(item => item.name)
            if (this.xxjdData.tab.list.length > 0) {
              this.xxjdData.tab.value = this.xxjdData.tab.list[0]
              this.singleImageProgressHistogram()
            } else {
              this.chartInstance['two-bar'] && this.chartInstance['two-bar'].clear()
            }
          }
        })
      }
    },
    singleImageProgressHistogram() {
      const params = {
        projectId: this.projectId
      }
      if (this.xxjdData.sectionId) {
        params.sectionId = this.xxjdData.sectionId
        params.id = this.xxjdData.tab.originList.find(item => item.name === this.xxjdData.tab.value).id
      } else {
        params.name = this.xxjdData.tab.value
      }
      progressBoard.singleImageProgressHistogram(params).then(res => {
        if (res.code === 200) {
          let chartDom = document.getElementById('two-bar')
          if (this.chartInstance['two-bar']) {
            this.chartInstance['two-bar'].clear()
            this.chartInstance['two-bar'].dispose()
          }
          if (res.data.y.length === 0) {
            res.data.y = [
              { name: '暂未配置形象工程', planProductionTotal: 0, realProductionTotal: 0 }
            ]
            res.data.x = ['暂未配置形象工程']
          }
          let myChart = echarts.init(chartDom)
          this.chartInstance['two-bar'] = myChart
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '10%',
              containLabel: false
            },
            legend: {
              right: '3%'
            },
            tooltip: {},
            dataset: {
              dimensions: ['product', '计划', '完成'],
              source: res.data.y.map(item => {
                return {
                  product: item.name,
                  '计划': item.planProductionTotal || item.planProduction,
                  '完成': item.realProductionTotal || item.realProduction,
                }
              })
            },
            xAxis: {
              type: 'category',

              axisTick: { show: false },
            },
            yAxis: {
              axisLine: { show: false },
              axisTick: { show: false },
              axisLabel: { show: false },
              splitArea: { show: false },
              // splitLine: {show:false},
            },
            series: [
              {
                type: 'bar',
                color: '#468BFF',
                barWidth: 14,
                itemStyle: {
                  borderRadius: [7, 7, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: (params) => {
                    return `${params.value[params.dimensionNames[params.encode.y[0]]]}万m²`
                  }
                }
              },
              {
                type: 'bar',
                color: '#5AC931',
                barWidth: 14,
                itemStyle: {
                  borderRadius: [7, 7, 0, 0]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: (params) => {
                    return `${params.value[params.dimensionNames[params.encode.y[0]]]}万m²`
                  }
                }
              }
            ]
          }
          option && myChart.setOption(option)
        }
      })
    },
    singleKeyEngineering1() {

    },
    singleKeyEngineering() {
      const params = {}
      if (this.gjgcData.sectionId) {
        params.sectionId = this.gjgcData.sectionId
      } else {
        params.projectId = this.projectId
      }
      this.leftBottomData = []
      progressBoard.singleKeyEngineering(params).then(res => {
        if (res.code === 200) {
          this.leftBottomData = res.data.list.map(item => {
            let percent = Number(item.percent)
            if (isNaN(percent)) {
              percent = 0
            }
            const index = Math.ceil(percent * 0.33)
            return {
              name: item.subdivision,
              percent: percent,
              //一共33个小格子，多少百分比就占 百分比*33 向上取整的数字的格子
              index,
              //上方箭头所在位置计算公式，(所占格子数*格子宽度12) + (所占格子数-1 * 格子之间的空格宽度4) - (箭头所占宽度的一半)
              location: (index * 12) + ((index - 1) * 4) - (50 / 2)
            }
          })
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";
// * {
//   box-sizing: border-box !important;
// }
.one {
  height: 394px;
  margin-bottom: 22px;
}
.left-top {
  width: 582px;
  height: 100%;
  margin-right: 23px;
  .content {
    height: 100%;
    padding: 0 36px;
    box-sizing: border-box;
    .number {
      width: 272px;
      height: 100%;
      justify-content: space-around;
      margin-right: 30px;
      .number-bg {
        width: 100%;
        height: 110px;
        border-radius: 15px;
        padding: 0 29px;
        box-sizing: border-box;
        img {
          width: 53px;
          height: 45px;
          margin-right: 27px;
        }
        .number-info {
          .num {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .big {
              min-height: 38px;
              font-size: 32px;
              line-height: 38px;
              white-space: nowrap;
            }
            .unit {
              font-size: 14px;
              line-height: 30px;
              margin-left: 2px;
            }
          }
          .info {
            font-size: 14px;
          }
        }
      }
      .blue {
        background: #f2f7ff;
      }
      .blueFColor {
        color: #005fff;
      }
      .orange {
        background: #fff9f2;
      }
      .orangeFColor {
        color: #ff8900;
      }
    }
    .percent {
      margin: 0 8px;
      ::v-deep .el-progress__text {
        font-size: 45px !important;
        font-weight: bold;
      }
      .pencent-info {
        font-size: 17px;
        color: #2c2c2c;
        line-height: 45px;
        text-align: center;
        margin-top: -30px;
      }
    }
  }
}
.right-top {
  height: 100%;
  .content {
    height: 100%;
    padding: 0 33px 20px;
    box-sizing: border-box;
    .month-progress {
      width: calc((100% - 2 * 24px) / 3);
      height: 100%;
      background: hsl(0, 0%, 97%);
      border-radius: 15px;
      .progress-detail {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 27px;
        padding: 10px 0;
        padding-left: 32px;
        box-sizing: border-box;
        .detail {
          width: 100%;
          height: 28%;
          text-align: left;
          .detail-title {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #333333;
          }
          .detail-number {
            height: 45px;
            line-height: 45px;
          }
          .colorBlue {
            font-size: 32px;
            font-family: DIN-Bold, DIN;
            font-weight: bold;
            color: #105cdd;
          }
          .colorGreen {
            font-size: 32px;
            font-family: DIN-Bold, DIN;
            font-weight: bold;
            color: #429f21;
          }
          .color {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #000000;
          }
        }
      }
      .percent {
        padding-right: 33px;
        .pencent-info {
          height: 22px;
          font-size: 15px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          color: #1c1e24;
          text-align: center;
        }
        ::v-deep .el-progress__text {
          font-size: 30px !important;
        }
      }
    }
  }
}
.two {
  height: 461px;
  margin-bottom: 24px;
}
.right-middle-left {
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    .barChart {
      width: 100%;
      height: 100%;
    }
  }
}
.right-middle-right {
  width: 500px;
  height: 100%;
  margin-left: 25px;
  .content {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    .detail {
      width: 48%;
      height: 50%;
      .detail-title {
        height: 24px;
        line-height: 24px;
        padding-left: 15px;
        background: #f8f8f8;
        border-radius: 3px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      }
      .detail-info {
        .desc {
          height: 20px;
          font-size: 14px;
          font-family: MicrosoftYaHei-, MicrosoftYaHei;
          font-weight: normal;
          color: #585858;
          line-height: 20px;
        }
        .number {
          height: 30px;
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #000000;
          line-height: 30px;
        }
      }
    }
  }
}
.trhee {
  height: 704px;
}
.left-bottom {
  width: 582px;
  height: 100%;
  margin-right: 23px;
  .content {
    padding: 0 30px;
    height: 100%;
    overflow-y: auto;
    .list-item {
      width: 100%;
      height: 75px;
      .item-title {
        margin-bottom: 15px;
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      .block-list {
        width: 100%;
        height: 22px;
        display: flex;
        flex-wrap: nowrap;
        .box {
          width: 12px;
          height: 22px;
          margin-right: 4px;
          background-color: #e4ecfc;
          .location {
            height: 30px;
            display: flex;
            align-items: flex-end;
            .percent {
              height: 20px;
              font-size: 14px;
              font-family: D-DIN-Regular, D-DIN;
              font-weight: 400;
              color: #333333;
              line-height: 20px;
              text-align: center;
              margin-left: 5px;
            }
            .trangle {
              width: 0;
              height: 0;
              border: 8px solid #000;
              border-top-color: #ff8900;
              border-bottom-color: transparent;
              border-left-color: transparent;
              border-right-color: transparent;
            }
          }
          &.active {
            background-color: #5192ff;
          }
          &.mark {
            position: relative;
          }
          &.mark > .location {
            position: absolute;
            top: -33px;
            left: 1px;
          }
        }
      }
    }
  }
}
.right-bottom {
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .header {
      width: 100%;
      height: 49%;
      display: flex;
      justify-content: space-around;
      .percent {
        width: 240px;
        margin-right: 20px;
        padding: 50px;
        .pencent-info {
          margin-top: 20px;
          height: 22px;
          font-size: 15px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #1c1e24;
          text-align: center;
          -webkit-background-clip: text;
        }
      }
      #line {
        flex: 1;
        height: 100%;
      }
    }
    .footer {
      width: 100%;
      height: 49%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tool {
        height: 50px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 20px;
      }
      #two-bar {
        width: 100%;
        flex: 1;
      }
    }
  }
}
::v-deep .el-select {
  width: 150px;
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    padding-right: 30px;
  }
  .el-input__icon {
    line-height: 32px;
  }
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  padding-right: 24px;
}

.clickable {
  cursor: pointer;
}
.clickable:hover {
  text-decoration: underline;
}
::v-deep .el-progress--line {
  white-space: nowrap;
}
</style>
